<template>
    <div class="count">
        <div class="topTit f f-a-c f-j-b">
            <div class="left f f-a-c">
                <img src="/src/status/img/logo.png" class="logo" alt="">
                <span>H.S.国际问题研究平台</span>
            </div>
            <div class="right">
                <img @click="setting" src="/src/status/img/cha.png" class="myStat" alt="">
            </div>
        </div>
        <div class="body">
            <!-- 上面的头像昵称 -->
            <div class="avatr f f-a-c">
                <img src="/src/status/shu.png" class="avati" alt="">
                <div class="id">{{ userinfo.nickname }}</div>
            </div>
            <!-- 修改密码 -->
            <div class="changePassword  f f-a-c f-j-b">
                <div @click="ChangePassword" class="password f f-a-c f-j-c">修改密码</div>
                <div @click="UseHelp" class="password f f-a-c f-j-c">使用帮助</div>
                <div @click="tuichu" class="password f f-a-c f-j-c">退出登录</div>
            </div>
            <!-- 这是列表 -->
            <div class="list">
                <div @click="hotShiJian" class="listItem f f-a-c">
                    <img src="/src/status/1.png" class="img" alt="">
                    <div class="name">热点事件</div>
                </div>
                <div @click="HotSpot" class="listItem f f-a-c">
                    <img src="/src/status/seh.png" class="img" alt="">
                    <div class="name">数据查搜</div>
                </div>
                <div @click="dataAnal" class="listItem f f-a-c">
                    <img src="/src/status/3.png" class="img" alt="">
                    <div class="name">数据分析</div>
                </div>
                <div @click="myCaiji" class="listItem f f-a-c">
                    <img src="/src/status/4.png" class="img" alt="">
                    <div class="name">我的采集</div>
                </div>
                <div @click="DataAnalysis" class="listItem f f-a-c">
                    <img src="/src/status/5.png" class="img" alt="">
                    <div class="name">流量统计</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import router from '../../router';
import { ref, onMounted } from 'vue'
import { showConfirmDialog } from 'vant';
import { Toast } from 'vant';
// 返回首页
let userinfo = ref({})

onMounted(() => {
    userinfo.value = JSON.parse(localStorage.getItem('userinfo'))
})

const setting = () => {
    router.go(-1)
}
// 点击跳转热点事件
const hotShiJian = () => {
    router.push('/IndexMove')
}
// /我的采集
const myCaiji = () => {
    router.push('/GatherIngredients')
}
// /跳转到数据分析
const dataAnal = () => {
    router.push('/DataAnalysis')
}
// 退出登录
const tuichu = () => {
    showConfirmDialog({
        title: '提示',
        message:
            '是否确认退出？',
    })
        .then(() => {
            // on confirm
            localStorage.removeItem('token')
            localStorage.removeItem('userinfo')
            router.push('/LoginMove')
            showToast('退出成功');
            // console.log('1111');
        })
        .catch(() => {
            // on cancel
        });

}
// 跳转到数据分析
const DataAnalysis = () => {
    router.push('/EChart')
}
// 跳转到使用帮助
const UseHelp = () => {
    router.push('/UseHelp')
}
// 跳转到修改密码
const ChangePassword = () => {
    router.push('/ChangePassword')
}
//点击跳转到数据查搜
const HotSpot = () => {
    router.push({
        path: '/DataSearchIndex',
        query: {
            id: 1
        }
    })
    // 判断是否创建过话题，没创建过话题时候跳转到 创建话题 页面
}

</script>
<style lang="scss" scoped>
@function pxfn($px) {
    @return calc($px / 3.75) * 1vw;
}


.body {
    height: calc(100vh - pxfn(48));
    padding: pxfn(20);

    .list {
        .listItem {
            margin-top: pxfn(30);

            .img {
                width: pxfn(20);
                height: pxfn(20);
                margin-right: pxfn(10);
            }

            .name {
                font-size: pxfn(14);
                font-family: PingFang SC, PingFang SC-500;
                font-weight: 600;
                text-align: center;
                color: #1d2129;
            }
        }
    }

    .changePassword {
        margin-top: pxfn(25);

        .password {
            width: pxfn(104);
            height: pxfn(40);
            background: #f7f8fa;
            border-radius: pxfn(6);
            font-size: pxfn(14);
            font-family: PingFang SC, PingFang SC-400;
            font-weight: 400;
            text-align: center;
            color: #1d2129;
        }

    }

    .avatr {
        .avati {
            width: pxfn(32);
            height: pxfn(32);
            border-radius: pxfn(16);
            margin-right: pxfn(15);
        }

        .id {
            font-size: pxfn(14);
            font-family: PingFang SC, PingFang SC-500;
            font-weight: 500;
            // text-align: LEFT;
            color: #32bbea;
        }
    }
}



.count {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    padding-top: pxfn(50);
}

.topTit {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: pxfn(48);
    border: 1px solid #edf3fa;
    padding: pxfn(15);
    z-index: 1;
    font-size: pxfn(14);
    font-weight: 600;

    .logo {
        width: pxfn(27);
        height: pxfn(24);
        margin-right: pxfn(10);
    }

    .myStat {
        width: pxfn(24);
        height: pxfn(24);
    }
}
</style>